import React, { Component } from 'react';
import { postLogin } from '../../api/index';
import { Form, Input, Button, Checkbox, message } from 'antd';
import styled from 'styled-components';
// import ImageView from '@/components/base/ImageView'
import axios from 'axios'

// axios.get('/api/ajax/movieOnInfoList?token=mcc_OXhlCUunzcoBPqhw4iXsSM0AAAAAagkAAB6v6vCAXSO61FDd-nFOczckixXtxhF8cB9SrXnPDC1_uZX0QV2UTTPxYF6dChEbkA&optimus_uuid=0C797E90A68911E98B80F9CACA51D0D91DF70F33AE88454E9F1C6CCD022D5131&optimus_risk_level=71&optimus_code=10').then(res => {
//   console.log(res, 'rres')
// })

const LoginWrapper = styled.div`
  width: 500px;
  margin: 0px auto;
  display: flex;
  justify-content: center;
  align-item: center;
  padding-top: 200px;
`;

const layout = {
  labelCol: {
    span: 8
  },
  wrapperCol: {
    span: 16
  }
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16
  }
};

class Demo extends Component {
  onFinish = values => {
    console.log('Success:', values);
    postLogin({ ...values }).then(res => {
      console.log(res, 'res');
      if (res.code === 0) {
        sessionStorage.setItem('token', res.token);
        this.props.history.push('/homeIndex/teacher')
      } else {
        message.error(res.msg);
      }
    });
  };

  onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };

  render() {
    return (
      <LoginWrapper>

        {/* <ImageView
          round={true}
          src="https://img.dmallcdn.com/dshop/202004/653d362b-af0c-40b5-8131-4f61e51a0668_750H"
        /> */}

        <Form
          {...layout}
          name='basic'
          initialValues={{
            remember: true
          }}
          onFinish={this.onFinish}
          onFinishFailed={this.onFinishFailed}
        >
          <Form.Item
            label='学号'
            name='stuId'
            rules={[
              {
                required: true,
                message: '请输入你的学号!'
              }
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label='密码'
            name='password'
            rules={[
              {
                required: true,
                message: '请输入你的密码！'
              }
            ]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item {...tailLayout} name='remember' valuePropName='checked'>
            <Checkbox>Remember me</Checkbox>
          </Form.Item>

          <Form.Item {...tailLayout}>
            <Button type='primary' htmlType='submit'>
              Submit
            </Button>
          </Form.Item>
        </Form>
      </LoginWrapper>
    );
  }
}

export default Demo;

// export default class componentName extends Component {
//   state = {
//     stuId: '',
//     password: ''
//   }

//   render() {
//     const { stuId, password } = this.state;
//     return (
//       <div>
//         {/* <input placeholder="请输入学号"
//         value={stuId} onChange={this.handleStuId} /> <br />
//         <input placeholder="请输入密码"
//         value={password} onChange={this.handlePassword}/> <br />
//          <button onClick={this.handleLogin}>登陆按钮</button> */}
//       </div>
//     )
//   }

//   handleStuId = (e) => {
//     const val = e.target.value
//     this.setState({
//       stuId: val
//     })
//   }

//   handlePassword = (e) => {
//     const val = e.target.value
//     this.setState({
//       password: val
//     })
//   }

//   handleLogin = () => {
//     const { stuId, password } = this.state;
//     postLogin({stuId, password}).then(res => {
//       console.log(res)
//       if (res.code === 0) {
//         sessionStorage.setItem('token', res.token)
//       } else {
//         alert(res.msg)
//       }
//       this.setState({
//         stuId: '',
//         password: ''
//       })
//     })
//   }
// }
